<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>材料使用率</title>
    <script src="../../static/bootstrap5.0.1/bootstrap5/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="../../static/bootstrap5.0.1/bootstrap5/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/layuiadmin/style/admin.css" media="all">
    <script src="../../static/layuiadmin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../static/css/common.css">
    <script src="../../static/echart/echarts.js"></script>
    <style>
        .bx {
            margin-left: 50px;
            margin-top: 50px;
        }

        .layui-table-cell {
            height: 40px;
            line-height: 40px;
        }

        .layui-input-block {
            margin-left: 150px;
            min-height: 36px;
        }
    </style>
</head>
<body>
<div class="layui-form">
    <div class="layui-inline tp">
        <div class="layui-form-item" style="margin-left: -110px;">
            <div class="layui-input-block">
                <select id="plan_name">
                    <option value="">请选择执行计划</option>
                    {% for key, val in plan_dic.items()%}
                    <option value="{{key}}">{{val}}</option>
                    {% endfor %}
                </select>
                <!--                <input type="text" name="title" required lay-verify="required" placeholder="请输入计划名称"-->
                <!--                       autocomplete="off" class="layui-input" id="plan_name">-->
            </div>
        </div>
    </div>
    <!--    <div class="layui-inline">-->
    <!--        <label class="layui-form-label" style="width: auto;">日志创建时间</label>-->
    <!--        <div class="layui-input-inline">-->
    <!--            <input type="text" name="date" id="log_date_search" lay-verify="date" placeholder="yyyy-MM"-->
    <!--                   autocomplete="off"-->
    <!--                   class="layui-input">-->
    <!--        </div>-->
    <!--    </div>-->
    <div class="layui-inline tp1">
        <div class="layui-form-item">
            <button id="searchconfig" class="btn btn-primary">搜索</button>
            <!--            <button id="datainit" class="btn btn-danger">新增</button>-->
        </div>
    </div>
</div>
<div style="display: none;" id="show_bind_msg">
    <div id="bind_table" lay-filter="bind_table"></div>
</div>
<div id="show_chart" style="height: 600px;width: 1280px;"></div>
</body>
<script type="text/html" id="operator">
    <!--    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</button>-->
    <!--    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="execute">查看绑定条件</button>-->
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
</script>
<script>
    layui.use(["table", "jquery", "layer", "laydate"], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            let laydate = layui.laydate;
            laydate.render({
                elem: "#log_date_search",
                value: new Date(),
                format: "yyyy-MM",
                type: 'month'
            })

            function chartRender(param) {
                $.post("/api/data/get_material_use_pert", param, function (res) {
                    if (res.code === 200) {
                        // {"tags": tags, "source": source, "use": use, "remain": remain}
                        let tags = res.data["tags"]
                        let source = res.data["source"]
                        let use = res.data["use"]
                        let percentages = res.data["percentages"]
                        const colors = ['#5470C6', '#91CC75', '#EE6666'];
                        let chartDom = document.getElementById('show_chart');
                        let myChart = echarts.init(chartDom, "dark");
                        let option = {
                            color: colors,
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            grid: {
                                right: '20%'
                            },
                            toolbox: {
                                feature: {
                                    dataView: {show: true, readOnly: false},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            legend: {
                                data: ['总量', '已使用', '使用百分比']
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    // prettier-ignore
                                    data: tags
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    name: '总量',
                                    position: 'right',
                                    alignTicks: true,
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: colors[0]
                                        }
                                    },
                                    axisLabel: {
                                        formatter: '{value}'
                                    }
                                },
                                {
                                    type: 'value',
                                    name: '已使用',
                                    position: 'right',
                                    alignTicks: true,
                                    offset: 80,
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: colors[1]
                                        }
                                    },
                                    axisLabel: {
                                        formatter: '{value}'
                                    }
                                },
                                {
                                    type: 'value',
                                    name: '材料数量',
                                    position: 'left',
                                    alignTicks: true,
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: colors[2]
                                        }
                                    },
                                    axisLabel: {
                                        formatter: '{value} 个'
                                    }
                                }
                            ],
                            series: [
                                {
                                    name: '总量',
                                    type: 'bar',
                                    data: source
                                },
                                {
                                    name: '已使用',
                                    type: 'bar',
                                    yAxisIndex: 1,
                                    data: use
                                },
                                {
                                    name: '使用百分比',
                                    type: 'line',
                                    yAxisIndex: 2,
                                    data: percentages
                                }
                            ]
                        };
                        option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    crossStyle: {
                                        color: '#999'
                                    }
                                }
                            },
                            toolbox: {
                                feature: {
                                    dataView: {show: true, readOnly: false},
                                    magicType: {show: true, type: ['line', 'bar']},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            legend: {
                                data: ['总量', '已使用', '使用占比']
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: tags,
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    name: '总量',
                                    min: 0,
                                    max: Math.max(...use) *4,
                                    interval: 200,
                                    axisLabel: {
                                        formatter: '{value}'
                                    }
                                },
                                {
                                    type: 'value',
                                    name: '使用占比',
                                    min: 0,
                                    max: 100,
                                    interval: 5,
                                    axisLabel: {
                                        formatter: '{value} %'
                                    },
                                    color: colors[2]
                                }
                            ],
                            series: [
                                {
                                    name: '总量',
                                    type: 'bar',
                                    tooltip: {
                                        valueFormatter: function (value) {
                                            return value + ' 个';
                                        }
                                    },
                                    data: source
                                },
                                {
                                    name: '已使用',
                                    type: 'bar',
                                    tooltip: {
                                        valueFormatter: function (value) {
                                            return value + ' 个';
                                        }
                                    },
                                    data: use
                                },
                                {
                                    name: '使用占比',
                                    type: 'line',
                                    yAxisIndex: 1,
                                    tooltip: {
                                        valueFormatter: function (value) {
                                            return value + ' %';
                                        }
                                    },
                                    data: percentages
                                }
                            ]
                        };
                        myChart.setOption(option);
                    } else {

                    }
                })
            }

            $("#searchconfig").click(function () {
                search_func();
            })

            function search_func() {
                let plan_id = $("#plan_name").val()
                chartRender({
                    "plan_id": plan_id
                });
            }

            $('#order_no_search').bind('keypress', function (event) {
                if (event.keyCode === 13) {
                    search_func();
                }
            })

            $("#datainit").click(function () {
                /**
                 // 显示加载层
                 // let loadIndex = layer.load(0, {
                 //     shade: [0.5, '#fff'],
                 //     zIndex: layer.zIndex,
                 //     content: "正在订单校验中...请稍后"
                 // });
                 // 在顶层显示加载层
                 // layer.setTop();
                 // $.post("/order/cal/order_cl", {}, function (res) {
                 //     // layer.close(loadIndex);
                 //     if (res.code === 200) {
                 //         layer.msg(res.msg, {icon: 6, time: 3000}, function () {
                 //             tableRender(null)
                 //         })
                 //     } else {
                 //         layer.msg(res.msg, {icon: 2, time: 3000}, function () {
                 //             // tableRender(null)
                 //         })
                 //     }
                 //
                 // })**/

                let idx = layer.open(
                    {
                        type: 1,
                        content: $('#addwl'),
                        title: '新增资产类型',
                        area: ['500px', '200px'],
                        btn: ['确定', '取消'],
                        yes: function (index, layerout) {
                            let zc_name = $("#zc_name").val()
                            if (zc_name === undefined || zc_name === "") {
                                layer.msg("资产类型不能为空", {icon: 2, time: 1500}, function () {
                                    //tableRender(null)
                                })
                                return;
                            }
                            let param = {
                                material_name: zc_name
                            }
                            $.post("/api/material/add_zc", param, function (res) {
                                if (res.code === 200) {
                                    layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                        tableRender(null)
                                        layer.close(idx);
                                    })
                                } else {
                                    layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                        // tableRender(null)
                                    })
                                }
                            })
                        },
                        btn2: function (index, layer) {

                        },
                        success: function () {

                        }
                    }
                );
            })
        }
    )
</script>
</html>